<template>
  <div class="app_content">
    <div class="table_qy">
      <div class="middle lb_title">操作日志</div>
      <div class="middle cxk_qy" ref="element">
        <!-- 'formInline' 为此el-form 自定义的对象  -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="工学号/姓名：">
            <el-input placeholder="请输入"  v-model="formInline.yhid" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="开始时间：">
            <el-date-picker type="datetime" placeholder="选择开始日期" v-model="formInline.date1" size="mini"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker type="datetime" placeholder="选择结束日期" v-model="formInline.date2" size="mini"></el-date-picker>
          </el-form-item>
          <el-form-item label="身份描述：">
            <el-input placeholder="请输入"  v-model="formInline.sfms" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="登录类型：">
            <el-select v-model="formInline.dllx"  size="mini" placeholder="请选择">
              <el-option v-for="item in formInline.dllxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search()" size="mini" class="button_search">查询</el-button>
            <el-button type="info" @click="reset()" size="mini" class="button_reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_padding">
        <div class="table_content">
          <el-table :data="tableData"  stripe border class="table_overflow" :style="{height: scrollerHeight}">
            <el-table-column type="index" label="序号" width="52"></el-table-column>
            <el-table-column v-if="false" type="id" label="id" width="52"></el-table-column>
            <el-table-column prop="yhid" label="用户ID" width="100"></el-table-column>
            <el-table-column prop="xm" label="姓名" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="ip" label="IP"  width="200"></el-table-column>
            <el-table-column prop="llqxx" label="浏览器信息" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="" label="访问终端类型" width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.fwzdlx === '0'">PC</span>
                <span v-if="scope.row.fwzdlx === '1'">移动端</span>
              </template>
            </el-table-column>
            <el-table-column prop="sfms" label="身份描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="czsj" label="操作时间" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
          <div class="pageIn">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[50,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {findDlrzListByPage} from '@/api/app/xtgl0301/dlrz.js'


export default {
  name: "dlrz",
  data() {
    return {
      formInline: {
        yhid:'',
        date1: '',
        date2: '',
        sfms: '',
        dllx: '0',
        dllxOptions:[{
          value: '0',
          label: '登录'
        }, {
          value: '1',
          label: '登出'
        }],
      },
      tableData:[],
      currentPage:1,
      pageSize:50,
      total:0,
      scrollerHeight:"",
      contentStyleObj:"200px",
    }
  },
  mounted() {
    this.search();
    let height= this.$refs.element.offsetHeight;
    this.scrollerHeight = (window.innerHeight - height - 210) + 'px';
  },
  methods: {                               //定义方法
    async search(){
      let params = {
        yhid: this.formInline.yhid,
        date1:this.formInline.date1,
        date2: this.formInline.date2,
        sfms : this.formInline.sfms,
        dllx :this.formInline.dllx,
        page : this.currentPage,
        pageSize: this.pageSize
      }
      let result = await findDlrzListByPage(params)
      if (result.code != "200") {
        this.$message.success('查询失败，失败原因：' + result.data.message);
      } else {
        this.tableData=result.data.content
        this.total = result.data.pageInfo.total
      }
    },
    reset() {
      this.$refs['search_form'].resetFields()
      this.search()
    },
    handleSizeChange(val) {                                               //分页
    },
    handleCurrentChange(val) {                                            //分页
      this.currentPage = val
    },
  }
}
</script>

<style scoped>
@import "../../../../styles/app0301.scss";
</style>